<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=yes,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../common/style/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../common/lib/swiper/swiper-4.0.5.min.css">
    <link rel='stylesheet prefetch' href="../../common/style/photoswipe.css">
    <link rel='stylesheet prefetch' href="../../common/style/default-skin.css">
    <link rel="stylesheet" type="text/css" href="../../common/style/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../../common/style/house.css" />
    <link rel="stylesheet" type="text/css" href="../../common/style/union.css" />
    <script src="../../common/lib/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../../common/js/md5.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script>
    <script
      type="text/javascript"
      src="../../common/request/request.js?version=1.0.12"
    ></script>
    <script type="text/javascript" charset="utf-8" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../common/js/weixin.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../common/js/share.js"></script>
    <script type="text/javascript" src="./js/brand.js?version=1.0.12"></script>
    <script type="text/javascript" src="../../common/js/aui-dialog.js"></script>
    <style>
        .lou-button {
            color: #fff;
            background: #00A0E9;
            display: block;
            width: 65%;
            margin: .25rem auto .5rem;
            padding: .35rem 0;
            font-size: .65rem;
            text-align: center;
            border-radius: 1rem;
        }

        .swiper-container {
            width: 100%;
        }
        .office-type{
            float:right;
        }
        .brands .picture .view-info-title {
            line-height: 2rem;
            color: #fff;
            font-weight: 500;
            font-size: 1.3rem;
            max-width: 12rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .brands .picture .view-info {
            background: rgba(0, 0, 0, .3);
            padding: 1rem;
            position: absolute;
            left: 0;
            top: 0;
            top: 50%;
            width: 60%;
            left: 50%;
            transform: translateX(-70%) translateY(-54%);
        }
        .aui-dialog-body{
            font-size:0.95em;
            color: #333;
        }
        .aui-dialog-btn{
            font-size: 0.95em;
        }
    </style>
</head>

<body class="layout-w brands" style="position:relative;">
  <div id="brand">
    <div class="aui-content-padded" style="margin-bottom:0;">
        <div class="top-search aui-clearfix">
            <div class="aui-pull-left">
                <img src="../../common/images/logo-2.svg" @click="goHome">
            </div>
            <div class="aui-pull-right more-info">
                <a href="javascript:;" style="padding-left:.5rem;" onClick="showMenus()">
                    <img src="../../common/images/more.svg" style="vertical-align: middle;width:.9rem;" >
                </a>
                <ul style="display: none;">
                    <li><a href="/home/html/">首页</a></li>
                    <li><a href="../search/search-result-brand.html">搜索选址</a></li>
                    <li><a href="../commiss/demand-entry.html">委托找房</a></li>
                    <li><a href="../others/enterDevelopers.html">入驻平台</a></li>
                </ul>
            </div>
            <div class="aui-pull-right" style="width:50%;">
                <!-- <form> -->
                    <div class="header-cearch">
                        <i class="fa fa-search"  @click="goToEntry"></i>
                        <input class="header-search-input" type="text" v-model="brandkeywords" placeholder="搜索联合办公品牌"   @focus="goToEntry">
                    </div>
                <!-- </form> -->
            </div>
        </div>
    </div>
    <div class="main-info aui-clearfix" id="fix-top" style="margin-top:0;">
        <div class="aui-pull-left" style="width:24%;"><img  :src="brandBaseInfo.brandLogo?brandBaseInfo.brandLogo:'../../common/images/noupload.png'" 
                style="height:2rem;margin-top:.2rem;"></div>
        <div class="aui-pull-left" style="width:45%;">
            <h2 class="title" v-html='brandBaseInfo.brandName'></h2>
            <p class="small" style="margin-top:.1rem" v-html='brandBaseInfo.brandSlogan'></p>
        </div>
        <div class="aui-pull-right">
            <a :href="'tel:'+brandBaseInfo.serviceTel">
                <img src="../../common/images/call.svg" >
            </a>
        </div>
        <div class="black-bg" style="width:95%;"></div>
    </div>
    <div class="aui-content-padded" style="margin-top:.4rem;">
        <dl class="union-area">
            <dt>社区分布</dt>
            <dd>
                <a v-html='brandBaseInfo.communityDistribute'></a>
            </dd>
        </dl>
        <!-- 接口无返回 -->
        <!-- <dl class="union-area"> 
            <dt>国内城市</dt>
            <dd>上海、深圳、南京、武汉、广州、重庆</dd>
        </dl> -->
        <dl class="union-brand-mode aui-margin-t-10">
            <!-- <a style="float: right;font-size: .6rem;color: #959AA6;padding-top: .2rem;padding-right: .2rem;" href="javascript:;">查看全部</a> -->
            <dt><img src="../../common/images/about/left.svg">&nbsp;&nbsp;社区印象</h3></dt>
            <dd>
                <div class="picture" id="picture">
                    <div class="swiper-container swiper-picture">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"  v-for="ommunityImpress in communityImpressList" v-if="communityImpressList.length>0">
                                <a href="javascript:;">
                                    <img  :src="ommunityImpress.imgUrlPc?ommunityImpress.imgUrlPc:'../../common/images/noupload.png'" />
                                    <div class="view-info">
                                        <span class="view-info-tag">旗舰社区</span>
                                        <p class="view-info-title" >
                                            <span v-html='ommunityImpress.communityName'></span>
                                        </p>
                                        <span class="view-info-address"><img
                                                src="../../common/images/union/icon-location.svg" />
                                        <span v-html='ommunityImpress.address'></span>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide"  v-if="communityImpressList.length==0">
                                <a href="javascript:;">
                                    <img src="../../common/images/noupload.png" />
                                </a>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </dd>
        </dl>
        <dl class="union-brand-mode aui-margin-t-10" v-if="brandHotPushList.houseSpace.length>0||brandHotPushList.houseOffice.length>0||brandHotPushList.houseRoad.length>0">
            <dt><img src="../../common/images/about/left.svg">&nbsp;&nbsp;热推空间</dt>
            <dd>
                <div class="member" v-if="brandHotPushList.houseSpace.length>0">
                    <h3 class="common-title-h3">开放办公位<a class="tips" href="javascript:;" @click="goSearch(2)">查看全部</a></h3>
                    <div class="swiper-container fujia" id="bgw" >
                        <div class="swiper-wrapper" >
                            <div class="swiper-slide"  v-for="item in brandHotPushList.houseSpace"  @click="checkDetail(item.communityId)">
                                <div class="details">
                                    <div class="pic">
                                        <img :src="item.url?item.url:'../../common/images/noupload.png'" style="display: inline;">
                                        <p style="font-weight:bold"><img src="../../common/images/union/icon-location.svg"><span  v-html='item.address'></span></p>
                                    </div>
                                    <div class="remark aui-clearfix">
                                        <div class="line-1">
                                            <span class="communityName">{{item.communityName}}</span>
                                            <span class="office-type " :class="[item.type == 1?'red':'blue']">
                                                <small>{{item.type == 1?'固定':'移动'}}</small>
                                            </span>
                                        </div>
                                        <div class="aui-clearfix detail-info">
                                            <div class="pull-left"><big v-html='item.price'></big><small>元·人/月起</small></div>
                                            <div class="pull-right sold-out" v-if="item.stock>5">
                                                <small  >余{{item.stock}}/总{{item.totalNum}}</small>
                                            </div>
                                            <div class="pull-right sold-out" v-if="item.stock == 0">
                                                <small >售罄</small>
                                            </div>
                                            <div class="pull-right warning" v-if="item.stock<=5 && item.stock!=0" style="color:#FF6F6F;">
                                                    <small >余量紧张</small>
                                            </div>    
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="member" v-if="brandHotPushList.houseOffice.length>0">
                    <h3 class="common-title-h3">专属办公间<a class="tips" href="javascript:;"  @click="goSearch(1)">查看全部</a></h3>
                    <div class="swiper-container fujia" id="bgj">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="item in brandHotPushList.houseOffice"  @click="checkDetail(item.communityId)">
                                <div class="details">
                                    <div class="pic">
                                        <img :src="item.url?item.url:'../../common/images/noupload.png'" style="display: inline;">
                                        <p style="font-weight:bold"><img src="../../common/images/union/icon-location.svg"><span  v-html='item.address'></span></p>
                                    </div>
                                    <div class="remark aui-clearfix">
                                        <div class="line-1">
                                            <span class="communityName" >{{item.communityName}}</span>
                                            <span class="office-type blue"><small>{{item.capacity}}人间</small></span>
                                        </div>
                                        <div class="aui-clearfix detail-info">
                                            <div class="pull-left"><big>{{item.price}}</big><small> 万元/月</small></div>
                                            <div class="pull-right sold-out"><small>余{{item.num}}/总{{item.totalNum}}</small></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="member" v-if="brandHotPushList.houseRoad.length>0">
                    <h3 class="common-title-h3">路演场地<a class="tips" href="javascript:;"  @click="goSearch(3)">查看全部</a></h3>
                    <div class="swiper-container fujia" id="ly">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="item in brandHotPushList.houseRoad"  @click="checkDetail(item.communityId)">
                                <div class="details">
                                    <div class="pic">
                                        <img :src="item.url?item.url:'../../common/images/noupload.png'" style="display: inline;">
                                        <p style="font-weight:bold"><img src="../../common/images/union/icon-location.svg"><span  v-html='item.address'></span></p>
                                    </div>
                                    <div class="remark aui-clearfix">
                                        <div class="line-1">
                                            <span class="communityName" >{{item.communityName}}</span>
                                            <span  class="office-type blue"><small>{{item.area}}m²</small></span></div>
                                        <div class="aui-clearfix detail-info">
                                            <div class="pull-left"><big>{{item.price}}</big><small> 元/月</small></div>
                                            <div class="pull-right sold-out"><small>{{item.capacity}}人</small></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </dd>
        </dl>
        <dl class="union-brand-mode aui-margin-t-10">
            <dt><img src="../../common/images/about/left.svg">&nbsp;&nbsp;品牌特色</dt>
            <dd>
                <div class="dis" style="color:#9B9B9B;" v-html='brandBaseInfo.brandFeature'>
                
                </div>
            </dd>
        </dl>
        <dl class="union-brand-mode aui-margin-t-10">
            <dt><img src="../../common/images/about/left.svg">&nbsp;&nbsp;品牌介绍</dt>
            <dd>
                <div class="dis" style="color:#9B9B9B;" v-html="brandBaseInfo.brandIntroduce">
                    
                </div>
            </dd>
        </dl>
        <dl class="union-brand-mode aui-margin-t-10">
            <dt><img src="../../common/images/about/left.svg">&nbsp;&nbsp;会员见解</dt>
            <dd>
                <div class="jianjie" id="jianjie">
                    <div class="swiper-container swiper-jianjie">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"  v-for="item in brandOptionList">
                                <div class="jianjie-detail">
                                    <img :src="item.url?item.url:'../../common/images/noupload.png'">
                                    <span class="member-name">{{item.title}}</span>
                                    <span class="member-title">{{brandBaseInfo.brandName}}</span>
                                    <span class="member-p"
                                        :title="item.content">{{item.content}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </dd>
        </dl>
        <div class="dibu-qrcode">
            <div class="bottom-line">
                <h5>关注公众号，选址更方便</h5>
                <div class="bg-line"></div>
            </div>
            <img src="../../common/images/qrcode.svg">
        </div>
        <!-- 底部 -->
        <footer>
            <img src="../../common/images/union/footer.svg" style="width:70%;">
        </footer>
        <!-- 底部 -->
    </div>
</div>  
    <a class="back-to-top" href="javascript:;">
        <img src="../../common/images/totop.svg">
    </a>
    <script src="../../common/lib/swiper/swiper-4.0.5.min.js"></script>
    <script>
        
        $(document).ready(function () {            
            setTimeout(function(){
                //开放办公位
                var swiperBGW = new Swiper('#bgw', { observer:true,observerParent:true,slidesPerView: 'auto', loop: false, direction: 'horizontal' });
                var swiperBGJ = new Swiper('#bgj', { observer:true,slidesPerView: 'auto', loop: false, direction: 'horizontal' });
                var swiperLY = new Swiper('#ly', { observer:true,slidesPerView: 'auto', loop: false, direction: 'horizontal' });
                var mySwiperP = new Swiper('.swiper-picture', {
                    observer:true,
                    autoplay: true,
                    direction: 'horizontal',
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'custom',
                        renderCustom: function (swiper, current, total) {
                            return current + ' / ' + total;
                        }
                    },
                })
                var mySwiperJ = new Swiper('.swiper-jianjie', { observer:true,slidesPerView: 'auto', autoplay: true, direction: 'horizontal' })
            },500)
            //回到顶部
            window.onscroll = function () {
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if (scrollTop >= 100) {
                    $('.back-to-top').fadeIn();
                } else {
                    $('.back-to-top').fadeOut();
                }

                //原生
                //获取div距离顶部的距离
                var mTop = document.getElementById('fix-top').offsetTop;
                //减去滚动条的高度
                var sTop = document.body.scrollTop;
                var result = mTop - sTop;

                if (scrollTop >= result) {
                    $('#fix-top').addClass('fix-top');
                    $('.black-bg').hide();
                }
                if (scrollTop <= 10) {
                    $('#fix-top').removeClass('fix-top');
                    $('.black-bg').show();
                }
            }
            $('.back-to-top').click(function () { $('html,body').animate({ scrollTop: '0px' }, 500); });
        })
        function showMenus(){
            $('.more-info ul').toggle();
        }
        $(document).click(function(e) { //点击空白处关闭弹窗
            var  pop = $('.more-info');  
            if(!pop.is(e.target) && pop.has(e.target).length === 0) { 
                $('.more-info ul').hide();
            }  
        });
    </script>
</body>

</html>